Cumulative Layout Shift(CLS)
ページが読み込まれ始めてから領域がずれた場合のズレ幅の和
viewport内が対象(それがLeyout Shiftの定義なので)
視覚の安定性を測る指標
予期せぬレイアウトのズレや崩れを独自に指標化
公式、詳しい
評価
https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dgpDFckbHwwOKdIGDa3N.svg https://web.dev/vitals/
スコアの値は小さいほど良い
0.25以上ならPoor
計測する
やたらある
2021では、SPAのように裏側で生きているページも、評価の対象になるらしい #?? ユーザーの入力(クリックなども含む)から500ms以内に発生するLayout SfhitはCLSから除外される ref 視覚的に「ここがアウト」感を見るツールないんか？
あったとて改善方法がわからなければ微妙か
nextjs
原因
画像の縦横幅を指定してない
動画やiframeの縦横幅を指定していない
動的にサイズ変更されるサードパーティの広告やウィジェット
改善する
詳しい
ズレるぐらいならLoadingを表示したほうがいいのか #?? これホンマにuserのためになっているのか微妙だが
youtubeのサイトとかとりあえず動画を爆速で表示させてるの、かなり良い気するし
書いてた